<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>v-if 条件渲染</title>
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.js"></script>-->
    <script type="text/javascript" src="../../js/vue.global.js"></script>

</head>
<body>
<!--vue 应用实例挂载到此ID上，这样它及其下面的标签才能使用 vue 语法获取数据-->
<div id="rootApp" style="margin: 50px">
    <h3>v-if 条件渲染</h3>
    <!--1、'v-if' 指令用于条件性地渲染一块内容，当指令的表达式返回 tru 值的时候元素会被渲染-->
    <!--2、null 或 undefined、0 等同于 false-->
    <hr/>
    <p v-if="1">看到我了！</p>
    <p v-if="null">看不到我了！源码中也没有。</p>
    <p v-if="undefined">看不到我了吧！源码中也没有。</p>
    <p v-if="0">也看不到我！源码中也没有。</p>
    <div>
        <!--3、'v-if' 可以与 v-else 组合使用。或者与 v-else-if 等组合使用-->
        <!--4、'v-else' 指令必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别-->
        <!--5、'v-else-if'，顾名思义是充当 else if 的作用，并且可以连续使用，同样必须紧跟在带 v-if 或者 v-else-if 的元素之后-->
        <p v-if="sex==1">男士请礼让女士</p>
        <p v-else-if="sex==2">女士优先</p>
        <p v-else>性别不确定</p>
    </div>

    <!--在 <template> 元素上使用 v-if 条件渲染分组-->
    <!--因为 v-if 是一个指令，所以必须将它添加到一个元素上, 所以当想切换多个元素时，可以使用特殊的 <template> 元素当做不可见的包裹元素，-->
    <!--并在上面使用 v-if，此时最终的渲染结果将不包含 <template> 元素.-->
    <template v-if="2">
        <p>在 template 元素上使用 v-if 条件渲染分组</p>
        <p>把一个 template 元素当做不可见的包裹元素</p>
        <p>最终的渲染结果将不包含 template 元素</p>
    </template>

    <h3>v-show 条件渲染</h3>
    <p>'v-show' 与 v-if 功能一样。</p>
    <p> 'v-show' 不支持 template 元素，也不支持 v-else 。</p>
    <p>不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中, v-show 只是简单地切换元素的 display 属性。</p>
    <p>当 v-show 条件不成立时，标签会出现在 DOM 结构中，只是通过 display: none; 样式控制标签不显示。</p>
    <p>如果元素需要频繁的切换显示与隐藏，则推荐 v-show，否则推荐 v-if。</p>
    <p v-show="undefined">看不到我，但是源码中存在！</p>

</div>
</body>

<script type="text/javascript">
    const author = "蚩尤后裔";
    const sex = 2;

    // 1、每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始, 用来在应用中注册"全局"组件
    // 2、传递给 createApp 的选项用于配置根组件
    // 3、应用实例暴露的大多数方法都会返回该同一实例，方便链式编程
    const App = Vue.createApp({
        //组件选项
        // data 定义数据, html 中可以进行获取
        data() {
            return {
                author,
                sex
            }
        }
    });

    // 4、一个应用需要被挂载(mount)到一个 DOM 元素中，当挂载(mount)应用时，该组件被用作渲染的起点
    // 5、与大多数应用方法不同的是 mount 不返回应用本身，而是返回的根组件实例(vm)
    const rootViewModel = App.mount("#rootApp");
    console.log(rootViewModel.author);

</script>
</html>
